<template>
  <div v-if="visible" class="main-menu-container">
    <div class="bg" @click="close"></div>
    <div class="menu-wrapper">
      <div class="menu-list">
        <a v-for="(item,index) in menuData" :href="item.url" :key="index" class="item" :class="{ active: active == item.url}">{{item.name}}</a>
      </div>
      <div class="tags">
        <div class="item">留学低龄</div>
        <div class="item">留学本科</div>
        <div class="item">留学硕士</div>
        <div class="item">留学博士</div>
      </div>
      <div class="introduce">
        留学录一站式服务平台<br>专为服务于留学生铺路
      </div>
      <div class="logo-wrap">
        <div class="logo-box">
          <img src="static/image/logo@2x.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 不支持 import
module.exports = {
  props: {
    visible: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      active: '',
      menuData: [
        { name: '首页', url: 'index.html' },
        { name: '留学国家', url: 'studyCountry.html' },
        { name: '我想读', url: 'wantRead.html' },
        { name: '留学模式', url: 'studyModel.html' },
        { name: '预科院校', url: 'preparatoryCollege.html' },
        { name: '留学专题', url: 'studyAbroad.html' },
        { name: '留学专业', url: 'studyMajor.html' },
        { name: '新闻资讯', url: 'news.html' },
        { name: '报名与咨询', url: 'registration.html' },
      ],
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  },
  mounted() {
    var strs = location.href.split('/')
    var url = strs[strs.length - 1].split('.')[0] + '.html'
    this.active = url;
  },
  watch: {
    visible(v) {
      if (v) {
        document.documentElement.style.overflow = 'hidden'
      } else {
        document.documentElement.removeAttribute('style')
      }
    }
  }
};
</script>

<style>

</style>